<template>
  <a-layout :class="['admin-layout', 'beauty-scroll']">
    <a-layout class="admin-layout-main beauty-scroll">
      <admin-header :class="[{'fixed-tabs': fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage}]" :style="headerStyle"  :isShow="false" :menuData="headMenuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
    </a-layout>
    <div class="WorkPlace">
      <div class="WorkPlace_left">
      <functional-zone class="functional_zone"></functional-zone>
      <chart-area class="agent_center"></chart-area>
      </div>
      <div class="WorkPlace_right">
        <system-quick-entry class="system_quick_entry"></system-quick-entry>
        <agent-center class="chart_area"></agent-center>
        <news-dulletin class="news_bulletin"></news-dulletin>
      </div>
</div>
  </a-layout>
</template>

<script>
import AdminHeader from '@/layouts/header/AdminHeader'
import {mapState, mapMutations, mapGetters} from 'vuex'
import ChartArea from '@/pages/components/ChartArea'
import NewsDulletin from '@/pages/components/NewsDulletin'
import FunctionalZone from '@/pages/components/FunctionalZone'
import SystemQuickEntry from '@/pages/components/SystemQuickEntry'
import AgentCenter from '@/pages/components/AgentCenter'

// const minHeight = window.innerHeight - 64 - 122

export default {
  name: 'AdminLayout',
  components: {AdminHeader,AgentCenter,ChartArea,FunctionalZone,SystemQuickEntry,NewsDulletin},
  data () {
    return {
      minHeight: window.innerHeight - 64 - 122,
      collapsed: false,
      showSetting: false,
      drawerOpen: false,
    }
  },
  provide() {
    return {
      adminLayout: this
    }
  },
  watch: {
    $route(val) {
      this.setActivated(val)
    },
    layout() {
      this.setActivated(this.$route)
    },
    isMobile(val) {
      if(!val) {
        this.drawerOpen = false
      }
    }
  },
  computed: {
    ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader', 'fixedSideBar',
      'fixedTabs', 'hideSetting', 'multiPage']),
    ...mapGetters('setting', ['firstMenu', 'subMenu', 'menuData']),
    sideMenuWidth() {
      return this.collapsed ? '80px' : '256px'
    },
    headerStyle() {
      let width = (this.fixedHeader && this.layout !== 'head' && !this.isMobile) ? `calc(100% - ${this.sideMenuWidth})` : '100%'
      let position = this.fixedHeader ? 'fixed' : 'static'
      return `width: ${width}; position: ${position};`
    },
    headMenuData() {
      const {layout, menuData, firstMenu} = this
      return layout === 'mix' ? firstMenu : menuData
    },
    sideMenuData() {
      const {layout, menuData, subMenu} = this
      return layout === 'mix' ? subMenu : menuData
    }
  },
  methods: {
    ...mapMutations('setting', ['correctPageMinHeight', 'setActivatedFirst']),
    toggleCollapse () {
      this.collapsed = !this.collapsed
    },
    onMenuSelect () {
      this.toggleCollapse()
    },
    setActivated(route) {
      if (this.layout === 'mix') {
        let matched = route.matched
        matched = matched.slice(0, matched.length - 1)
        const {firstMenu} = this
        for (let menu of firstMenu) {
          if (matched.findIndex(item => item.path === menu.fullPath) !== -1) {
            this.setActivatedFirst(menu.fullPath)
            break
          }
        }
      }
    },
    loop(){
      localStorage.setItem('menuLevel',1)
      this.$router.push('/projectList')
    },
  },
  created() {
    this.correctPageMinHeight(this.minHeight - 24)
    this.setActivated(this.$route)
  },
  beforeDestroy() {
    this.correctPageMinHeight(-this.minHeight + 24)
  },
}
</script>

<style lang="less" scoped>
  .admin-layout{
    .side-menu{
      &.fixed-side{
        position: fixed;
        height: 100vh;
        left: 0;
        top: 0;
      }
    }
    .virtual-side{
      transition: all 0.2s;
    }
    .virtual-header{
      transition: all 0.2s;
      opacity: 0;
      &.fixed-tabs.multi-page:not(.fixed-header){
        height: 0;
      }
    }
    .admin-layout-main{
      .admin-header{
        top: 0;
        right: 0;
        overflow: hidden;
        transition: all 0.2s;
        &.fixed-tabs.multi-page:not(.fixed-header){
          height: 0;
        }
      }
    }
    .admin-layout-content{
      padding: 24px 24px 0;
      /*overflow-x: hidden;*/
      /*min-height: calc(100vh - 64px - 122px);*/
    }
    .setting{
      background-color: @primary-color;
      color: @base-bg-color;
      border-radius: 5px 0 0 5px;
      line-height: 40px;
      font-size: 22px;
      width: 40px;
      height: 40px;
      box-shadow: -2px 0 8px @shadow-color;
    }
  }
  .WorkPlace{
  box-sizing: border-box;
  height: 100%;
  display: flex;
  .WorkPlace_left{
    height: 100%;
    flex: 7;
    margin: 20px;
    .functional_zone{
      width: 100%;
      height: 290px;
      background: #FFFFFF;
      border-radius: 1px;
      margin-bottom: 20px;
    }
    .agent_center{
      width: 100%;
      height: 676px;
      background: #FFFFFF;
      border-radius: 1px;
    }
  }
  .WorkPlace_right{
    height: 100%;
    flex: 3;
    height: 100%;
    margin: 20px 20px 20px 0;
    .system_quick_entry{
    width: 420px;
    height: 290px;
    background: #FFFFFF;
    border-radius: 1px;
    margin-bottom: 20px;
    }
    .chart_area{
    width: 420px;
    height: 366px;
    background: #FFFFFF;
    border-radius: 1px;
    margin-bottom: 20px;
    }
    .news_bulletin{
    width: 420px;
    height: 290px;
    background: #FFFFFF;
    border-radius: 1px;
    }
  }
}
</style>
